﻿<div class="dskb">
    <table class="dskb-container">
        <thead>
            <tr class="dskb-row dskb-states-row">
                <td class="dskb-cell dskb-header dskb-row-header dskb-column-header dskb-toggle-button-area"></td>
                <td ng-if="!dskb.hideGroups" class="dskb-cell dskb-header dskb-row-header dskb-column-header dskb-content" ng-style="{ width: dskb.groupWidth }" ng-transclude></td>
                <td ng-repeat="state in dskb.states" class="dskb-cell dskb-header dskb-column-header dskb-state-header" ng-style="{ width: state.width ? state.width : dskb.stateWidth }">
                    <ng-include src="state.templateUrl ? state.templateUrl : dskb.stateTemplateUrl"/>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr ng-if="!dskb.groups.length" class="dskb-group-collapsed">
                <td colspan="2" class="dskb-cell dskb-header dskb-row-header dskb-no-items-label">
                    {{ dskb.noItemsLabel }}
                </td>
                <td ng-repeat="state in dskb.states" class="dskb-cell dskb-header dskb-column-header dskb-state-header" ng-style="{ width: state.width ? state.width : dskb.stateWidth }"></td>
            </tr>
            <tr ng-repeat="group in dskb.groups" class="dskb-row dskb-group-row" ng-class="group.isCollapsed ? 'dskb-group-collapsed' : null">
                <td class="dskb-cell dskb-header dskb-row-header dskb-toggle-button-area" ng-click="group.isCollapsed = !group.isCollapsed">
                    <svg ng-if="!group.isCollapsed" class="dskb-toggle-button" width="8" height="8">
                        <polygon points="1,7 7,7 7,1" class="dskb-toggle-button-expanded"/>
                    </svg>
                    <svg ng-if="group.isCollapsed" class="dskb-toggle-button" width="8" height="8">
                        <polygon points="0,0 6,4 0,8" class="dskb-toggle-button-collapsed"/>
                    </svg>
                </td>
                <td ng-if="!dskb.hideGroups" class="dskb-cell dskb-header dskb-row-header dskb-group-container">
                    <div ng-style="{ height: (!group.isCollapsed ? dskb.groupHeight : dskb.collapsedGroupHeight) + 'px' }" class="dskb-content-box" ds:kanban-item-drop-zone can-drop="dskb.canDropGroup(type, index, dskb.groups.indexOf(group))" on-drop="dskb.onGroupDrop(type, index, dskb.groups.indexOf(group))">
                        <ng-include src="group.templateUrl ? group.templateUrl : (group.itemType && group.itemType.templateUrl ? group.itemType.templateUrl : dskb.groupTemplateUrl)"/>
                    </div>
                </td>
                <td ng-repeat="state in dskb.states" class="dskb-cell dskb-items-container">
                    <div ng-hide="group.isCollapsed" ng-style="{ height: ((!group.isCollapsed ? dskb.getItemsInGroupAndState(group, dskb.getMaxStateInGroup(group)).length : 1) * dskb.itemHeight + (!dskb.isReadOnly && !dskb.areNewItemButtonsHidden && !dskb.getMaxStateInGroup(group).isReadOnly && !dskb.getMaxStateInGroup(group).areNewItemButtonsHidden && !group.isReadOnly ? 26 : 0)) + 'px' }">
                        <div ng-repeat="item in dskb.getItemsInGroupAndState(group, state)" ds:kanban-item-drop-zone can-drop="dskb.canDropItem(type, index, group, state, dskb.items.indexOf(item))" on-drop="dskb.onItemDrop(type, index, group, state, dskb.items.indexOf(item))">
                            <div ng-style="{ height: dskb.itemHeight + 'px' }" class="dskb-content-box">
                                <ng-include src="item.templateUrl ? item.templateUrl : (item.itemType && item.itemType.templateUrl ? item.itemType.templateUrl : dskb.itemTemplateUrl)"/>
                            </div>
                        </div>
                        <div class="dskb-commands-container" ng-style="{ height: ((dskb.getItemsInGroupAndState(group, dskb.getMaxStateInGroup(group)).length - dskb.getItemsInGroupAndState(group, state).length) * dskb.itemHeight + (!dskb.isReadOnly && !dskb.areNewItemButtonsHidden && !dskb.getMaxStateInGroup(group).isReadOnly && !dskb.getMaxStateInGroup(group).areNewItemButtonsHidden && !group.IsReadOnly ? 26 : 0)) + 'px' }" ds:kanban-item-drop-zone can-drop="dskb.canDropItem(type, index, group, state)" on-drop="dskb.onItemDrop(type, index, group, state)">
                            <a href="javascript://" ng-hide="dskb.isReadOnly || dskb.areNewItemButtonsHidden || state.isReadOnly || state.areNewItemButtonsHidden || group.isReadOnly || group.areNewItemButtonsHidden" class="dskb-button dskb-new-item-command" ng-click="dskb.addNewItem(group, state)" title="{{ dskb.newItemButtonToolTip }}">
                                {{ dskb.newItemButtonText }}
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>